/*
* @Author: apple
* @Date:   2017-09-17 18:58:47
* @Last Modified by:   apple
* @Last Modified time: 2017-09-25 21:15:59
*/

html,
body,
.section {
    min-height: 600px;
    min-width: 1000px;
    /* 最小的宽度和高度 防止 缩放过于变形 */
}


/* 8个背景样式 */

#fp-nav ul li a span {
    /*  提高层叠性 */
    background: #f40!important;
}

.next {
    position: fixed;
    bottom: 120px;
    right: 10%;
    z-index: 999;
}


/* 第一屏幕制作 start */

.section1 {
    background: #fadd67 url(../images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;
}

.fly {
    position: absolute;
    right: 20%;
    top: 10%;
}

.shirt01 {
    position: absolute;
    left: 50%;
    margin-left: -200px;
    bottom: 335px;
}

.goods {
    position: absolute;
    left: 50%;
    margin-left: -420px;
    bottom: 150px;
}


/* 第一屏幕制作 end */


/* 第二屏幕制作 start */

.section2 {
    background: #84a2d4 url(../images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
    z-index: 2;
}

.computer {
    width: 990px;
    height: 500px;
    position: absolute;
    left: 50%;
    /* margin-left: 495px; */
    transform: translateX(-50%);
    /* background: rgba(0,0,0,.3); */
    bottom: 0;
}

.search {
    width: 222px;
    height: 45px;
    background: url(../images/search.png) no-repeat;
    right: -30px;
    bottom: 300px;
    position: absolute;
    display: none;
}

.search-wrods {
    position: absolute;
    right: 32px;
    top: 5px;
    opacity: 0;
    /* 因为后面我们做淡入淡出的效果，所以我们用透明度 不要用 display */
}

.search-02-1 {
    position: absolute;
    bottom: 300px;
    right: 370px;
    display: none;
    /* 这个不要淡入淡出，里面显示或者隐藏 */
}

.goods-02 {
    height: 100px;
    position: absolute;
    bottom: 217px;
    right: 270px;
    display: none;
    /* jquery 里面用 show  hide 隐藏 */
}

.words-01,
.words-02 {
    position: absolute;
    left: 50%;
    bottom: 550px;
    transform: translateX(-50%);
}

.words-02 {
    opacity: 0;
}

.shirt-02 {
    position: absolute;
    bottom: 345px;
    left: 395px;
    width: 100px;
    display: none;
    z-index: 10;
}

.cover {
    position: absolute;
    bottom: 334px;
    right: 496px;
    width: 101px;
    height: 90px;
    z-index: 5;
    background-color: #fff;
    display: none;
}


/* 第二屏幕制作 end */


/* 第三屏幕制作 start */

.section3 {
    background: #ef674d;
    z-index: 1;
}

.main {
    position: absolute;
    width: 700px;
    height: 500px;
    background: url(../images/main.png) no-repeat center center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
}

.select {
    width: 300px;
    height: 250px;
    position: absolute;
    bottom: 0;
    right: 8px;
    /* background-color: pink; */
}

.img {
    position: absolute;
    top: 0;
}

.img-01-a {
    opacity: 0;
    /* 这里我们先不用 display:  而用  opacity 淡入效果 */
}

.btn {
    position: absolute;
    bottom: 10px;
}

.btn-01-a {
    opacity: 0;
    /* 这里我们先不用 display:  而用  opacity 淡入效果 */
}


/* 沙发 */

.shirt-03,
.t1f {
    position: absolute;
    left: 115px;
    bottom: 200px;
    display: none;
}


/* 第三屏幕制作 end */


/* 第四屏幕制作 start */

.section4 {
    background: #fed url(../images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;
}

.cloud {
    position: absolute;
    left: 50%;
    bottom: 550px;
}

.word {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 500px;
}

.words-04-a {
    opacity: 0;
}

.car {
    width: 500px;
    position: absolute;
    /* background-color: pink; */
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

.car-img {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    /* 负值 往下叠加 */
    display: none;
}

.note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: pink;
    bottom: 180px;
    display: none;
}

.note-img {
    position: absolute;
    top: 60px;
    left: 60px;
    opacity: 0;
    /* 淡入淡出 opacity */
}


/* 第四屏幕制作 end */


/* 第五屏幕制作 start */

.section5 {
    background: #d04759 url(../images/t1yisqfa4exxa3gmkg-2000-1500.png);
    /* overflow: hidden; */
    perspective: 500;
    -webkit-perspective: 500;
    z-index: 1;
}

.words-05 {
    position: absolute;
    left: 20%;
    top: 10%;
    opacity: 0;
}

.card-05 {
    position: absolute;
    left: 20%;
    bottom: 200px;
    z-index: 10;
}

.order-05 {
    position: absolute;
    left: 27%;
    bottom: 270px;
}

.t1f-05 {
    position: absolute;
    bottom: 800px;
    left: 25%;
    display: none;
}

.mouse {
    position: absolute;
    right: 20%;
    bottom: 200px;
}

.mouse-05-a {
    opacity: 0;
}

.hand-05 {
    position: absolute;
    right: 24%;
    bottom: -375px;
}

.overFlow {
    /* 切掉 鼠标小尾巴 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* 第五屏幕制作 end */


/* 第6屏幕制作 start */

.section6 {
    background: #84d9ed url(../images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
}

.box-06 {
    position: absolute;
    left: 123px;
    bottom: 500px;
    z-index: 50;
}

.car-06 {
    position: absolute;
    bottom: 0;
    right: 50%;
    z-index: 60;
}

.cloud-06 {
    position: absolute;
    left: 50%;
    bottom: 550px;
    animation: cloud6 30s;
}

@keyframes cloud6 {
    50% {
        left: 10%;
    }
}

.pop-06 {
    position: absolute;
    bottom: 119px;
    right: 48%;
    display: none;
    z-index: 50;
}

.boy {
    right: 50%;
    bottom: 0;
    position: absolute;
    height: 100px;
}

.girl {
    position: absolute;
    right: 315px;
    bottom: 116px;
    height: 123px;
    display: none;
    z-index: 50;
}

.door {
    position: absolute;
    right: 285px;
    bottom: 116px;
    opacity: 0;
}

.pop-07 {
    position: absolute;
    right: 445px;
    bottom: 400px;
    z-index: 40;
    display: none;
}

.words-06-a {
    position: absolute;
    left: 10%;
    bottom: 479px;
    display: none;
}


/* 第6屏幕制作 end */


/* 第7屏幕制作 start */

.section7 {
    background: #8ac060 url(../images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
}

.star {
    position: absolute;
    left: 50%;
    bottom: 439px;
    margin-left: -295px;
    width: 0;
    height: 20px;
    background: url(../images/star.png) no-repeat;
    background-size: 97px;
}

.good-07 {
    position: absolute;
    bottom: 382px;
    left: 50%;
    margin-left: -289px;
    display: none;
}


/* 第7屏幕制作 end */


/* 第8屏幕制作 start */

.section8 {
    background: url(../images/ksgw.png);
}

.beginShoping {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 365px;
}

.btn-08-a {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.again {
    position: absolute;
    bottom: 403px;
    left: 50%;
    margin-left: 240px;
    cursor: pointer;
}

.hand-08 {
    position: absolute;
    bottom: 0;
    left: 50%;
}


/* 第9屏幕制作 end */


/* 直接进入购物中心 */

.go {
    position: fixed;
    top: 5%;
    right: 5%;
    z-index: 999;
}


/* 动画组 */

.next_undown {
    animation: next .6s linear infinite;
    /*  linear 匀速 */
}

@keyframes next {
    /* 类似于js 的声明函数 function */
    50% {
        bottom: 100px;
    }
    100% {
        bottom: 120px;
    }
}

.updown {
    /*  类似于 js  调用函数 */
    animation: fly 3s linear infinite;
    /*  linear 匀速 */
}

.shirt-updown {
    animation: shirt01 2.5s linear infinite;
    /*  linear 匀速 */
}

@keyframes fly {
    /* 类似于js 的声明函数 function */
    0% {
        top: 10%;
    }
    50% {
        top: 20%;
    }
    100% {
        top: 10%;
    }
}

@keyframes shirt01 {
    /* 类似于js 的声明函数 function */
    50% {
        bottom: 360px;
    }
    100% {
        bottom: 335px;
    }
}


/* 云彩第一组 */

.cloud-back1 {
    animation: cloud 60s linear infinite;
}

@keyframes cloud {
    0% {
        left: 50%;
    }
    50% {
        left: -10%;
    }
    100% {
        left: 50%;
    }
}

.words-05-a {
    animation: words5 3s forwards;
    /* animation-fill-mode: forwards;  让我们的动画保持最后一帧状态 不循环 */
}

@keyframes words5 {
    100% {
        opacity: 1;
        transform: translateZ(100px) rotateY(360deg);
    }
}